<template>
  <div class="f-body">
    <div class="f-search">
      <el-input v-model="where.name" placeholder="姓名" class="f-search-item f-search-name" size="small"></el-input>
      <el-button type="primary" icon="el-icon-search" class="f-search-item" size="small">搜索</el-button>
      <el-button type="primary" icon="el-icon-plus" class="f-search-item" size="small" >添加</el-button>
    </div>
    <el-table ref="FTable" v-loading="listLoading" empty-text="暂无数据" :data="list" >
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="日期">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button size="mini">Edit</el-button>
          <el-button size="mini" type="danger">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <FPagination :page.sync="where.page" :limit.sync="where.limit" :total="total" @pagination="getList"></FPagination>
  </div>
</template>
<script>
import FPagination from '@/components/f-pagination/f-pagination'
const listData = {
  code: 200,
  message: 'success',
  data: {
    page: 1,
    limit: 20,
    total: 52,
    data: []
  }
}

export default {
  components: {
    FPagination
  },
  data () {
    return {
      listLoading: true,
      total: 0,
      where: {
        page: 1,
        limit: 20,
        name: ''
      },
      list: null,
      search: ''
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.listLoading = true
      listData.data.data = []
      this.moniData()
      this.list = listData.data.data
      this.total = listData.data.total
      this.listLoading = false
    },
    moniData () {
      for (let i = 0; i < this.where.limit; i++) {
        listData.data.data.push({
          date: '2020-06-02',
          name: '王小虎' + parseInt(Math.random() * 10 + 1, 10),
          address: '上海市普陀区金沙江路' + i
        })
      }
    }
  }
}
</script>
<style scoped>
  .f-search{
    padding: 10px;
  }
  .f-search-item{
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .f-search-name{
    width: 220px;
  }
</style>
